//计划完成表的当前所选
var indexnum = 0;
var color = ['#F35331', '#2499F8', '#3DF098', '#33B734'];
var fontColor = '#FFF';

//定义进度条组件和属性
var y_gauge1 = null;
var y_gauge2 = null;
var y_gauge3 = null;
var y_gauge4 = null;
var m_gauge1 = null;
var m_gauge2 = null;
var m_gauge3 = null;
var m_gauge4 = null;
var d_gauge1 = null;
var d_gauge2 = null;
var d_gauge3 = null;
var d_gauge4 = null;
var option_Progress = null;

//定义仪表盘组件和属性
var gauge1 = null;
var gauge2 = null;
var gauge3 = null;
var gauge4 = null;
var gauge5 = null;
var option_gauge = null;

//生产质量堆积图组件和属性
var quality_chart = null;
var quality_option = null;

//生产计划折线图组件和属性
var plan_chart = null;
var plan_option = null;

//环形图的风格定义
var dataStyle = {
    normal: {
        label: {show: false},
        labelLine: {show: false}
    }
};
var placeHolderStyle = {
    normal: {
        color: 'rgba(0,0,0,0.1)',
        label: {show: false},
        labelLine: {show: false}
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};

//最大订单号
var lastOrderNumber = 1;

$(document).ready(function () {
    //环形进度条设置对象
    option_Progress = {
        title: {
            text: '目前进度',
            subtext: '50%',
            x: 'center',
            y: 90,
            itemGap: 10,
            textStyle: {
                color: '#B7E1FF',
                fontWeight: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 24
            },
            subtextStyle: {
                color: '#B7E1FF',
                fontWeight: 'bolder',
                fontSize: 24,
                fontFamily: '微软雅黑'
            }
        },
        series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: [75, 90],
            x: '0%',
            tooltip: {show: false},
            data: [{
                name: '达成率',
                value: 79,
                itemStyle: {color: 'rgba(0,153,255,0.8)'},
                hoverAnimation: false,
                label: {
                    show: false,
                    position: 'center',
                    textStyle: {
                        fontFamily: '微软雅黑',
                        fontWeight: 'bolder',
                        color: '#B7E1FF',
                        fontSize: 24
                    }
                },
                labelLine: {
                    show: false
                }
            },
                {
                    name: '79%',
                    value: 21,
                    itemStyle: {color: 'rgba(0,153,255,0.1)'},
                    hoverAnimation: false,
                    label: {
                        show: false,
                        position: 'center',
                        padding: 20,
                        textStyle: {
                            fontFamily: '微软雅黑',
                            fontSize: 24,
                            color: '#B7E1FF'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }]
        },
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [95, 100],
                x: '0%',
                hoverAnimation: false,
                data: [{
                    value: 100,
                    itemStyle: {color: 'rgba(0,153,255,0.3)'},
                    label: {show: false},
                    labelLine: {show: false}
                }]
            },
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [69, 70],
                x: '0%',
                hoverAnimation: false,
                data: [{
                    value: 100,
                    itemStyle: {color: 'rgba(0,153,255,0.3)'},
                    label: {show: false},
                    labelLine: {show: false}
                }]
            }]
    };

    //年仪表盘
    y_gauge1 = echarts.init(document.getElementById('y_gauge1'));
    y_gauge2 = echarts.init(document.getElementById('y_gauge2'));
    y_gauge3 = echarts.init(document.getElementById('y_gauge3'));
    y_gauge4 = echarts.init(document.getElementById('y_gauge4'));

    //月仪表盘
    m_gauge1 = echarts.init(document.getElementById('m_gauge1'));
    m_gauge2 = echarts.init(document.getElementById('m_gauge2'));
    m_gauge3 = echarts.init(document.getElementById('m_gauge3'));
    m_gauge4 = echarts.init(document.getElementById('m_gauge4'));

    //日仪表盘
    d_gauge1 = echarts.init(document.getElementById('d_gauge1'));
    d_gauge2 = echarts.init(document.getElementById('d_gauge2'));
    d_gauge3 = echarts.init(document.getElementById('d_gauge3'));
    d_gauge4 = echarts.init(document.getElementById('d_gauge4'));

    //监控仪表盘
    option_gauge = {
        title: {
            text: '', //标题文本内容
        },
        toolbox: { //可视化的工具箱
            show: false,
        },
        tooltip: { //弹窗组件
            formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
            type: 'gauge',
            axisLine: {// 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                        [0.2, color[0]],
                        [0.8, color[1]],
                        [1, color[2]]
                    ],
                    width: 18
                }
            },
            splitLine: { // 分隔线
                show: true,
                length: 18,
                lineStyle: {
                    color: '#28292D',
                    width: 1
                }
            },
            axisTick: { //刻度线样式（及短线样式）
                show: false,
                lineStyle: {
                    color: 'auto',
                    width: 1
                },
                length: 20
            },
            axisLabel: {
                color: '#FFF',
                fontSize: 14,
                fontFamily: 'Verdana, Geneva, sans-serif'
            },
            title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    color: '#FFF'
                },
                offsetCenter: [0, '30%']
            },
            pointer: {
                width: 5,
                color: '#F00',
                shadowColor: '#FF0',
                shadowBlur: 10
            },
            detail: {
                show: false,
                formatter: '{value}%',
                textStyle:
                    {
                        fontFamily: 'Arial',
                        color: '#000',
                        fontSize: '32px'
                    },
                offsetCenter: [0, '90%']
            },
            data: [{value: 45, name: '水'}]
        }]
    };

    gauge1 = echarts.init(document.getElementById('gauge1'));
    gauge2 = echarts.init(document.getElementById('gauge2'));
    gauge3 = echarts.init(document.getElementById('gauge3'));
    gauge4 = echarts.init(document.getElementById('gauge4'));
    gauge5 = echarts.init(document.getElementById('gauge5'));
    option_gauge.series[0].axisLine.lineStyle.color = [[0.2, color[0]], [0.8, color[1]], [1, color[2]]];
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "水";
    $('#vg1').html(option_gauge.series[0].data[0].value);
    gauge1.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "电";
    $('#vg2').html(option_gauge.series[0].data[0].value);
    gauge2.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "天然气";
    $('#vg3').html(option_gauge.series[0].data[0].value);
    gauge3.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "压缩空气";
    $('#vg4').html(option_gauge.series[0].data[0].value);
    gauge4.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "蒸汽";
    $('#vg5').html(option_gauge.series[0].data[0].value);
    gauge5.setOption(option_gauge);

    //生产质量堆积图
    quality_chart = echarts.init(document.getElementById('quality'));
    quality_option = {
        title: {
            show: false,
            text: 'AUDIT',
            left: 'center',
            textStyle: {
                color: '#F00',
                fontSize: 32
            }
        },
        xAxis: {
            data: ['1月10日', '2月10日', '3月10日', '4月10日', '5月10日', '6月10日'],
            axisLabel: {
                textStyle: {
                    color: '#B7E1FF',
                    fontSize: 24
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#09F'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#09F'
                }
            }
        },
        yAxis: {
            inverse: false,
            splitArea: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
                textStyle: {
                    color: '#B7E1FF',
                    fontSize: 24,
                    fontFamily: 'Arial',
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#09F'
                }
            }
        },
        grid: {
            left: 100
        },
        tooltip: {
            trigger: 'item',
            textStyle: {
                color: '#B7E1FF',
                fontSize: 24
            }
        },
        legend: {
            show: false,
            top: 'bottom',
            textStyle: {
                color: '#F00',
                fontSize: 24,
                fontFamily: '微软雅黑'
            },
            data: ['AUDIT分数1', 'AUDIT分数']
        },
        series: [
            {
                name: 'AUDIT分数1',
                type: 'bar',
                stack: 'one',
                itemStyle:
                    {
                        normal: {color: color[1]}
                    },
                barWidth: 60,
                data: [2200, 2900, 3680, 2200, 2900, 3680]
            },
            {
                name: 'AUDIT分数',
                type: 'bar',
                stack: 'one',
                itemStyle: {
                    normal: {
                        color: '#F90',
                        label: {
                            show: true,
                            position: 'insideTop',
                            textStyle: {
                                color: '#000',
                                fontSize: 24
                            }
                        }
                    }
                },
                barWidth: 50,
                data: [1800, 1100, 320, 1800, 1100, 320]
            }
        ]
    };
    quality_chart.setOption(quality_option);

    //生产计划折线图
    var plan_data1 = [];
    var plan_data2 = [];
    var plan_xAxis = [];
    for (var i = 1; i <= 7; i++) {
        plan_xAxis.push("3月" + i + "日");
        plan_data1.push(Math.round(Math.random() * 100));
        plan_data2.push(Math.round(Math.random() * 100));
    }
    plan_chart = echarts.init(document.getElementById('plan'));
    plan_option = {
        xAxis: {
            data: plan_xAxis,
            axisLabel: {
                textStyle: {
                    color: '#B7E1FF',
                    fontSize: 24
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#09F'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#09F'
                }
            }
        },
        yAxis: {
            inverse: false,
            splitArea: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
                textStyle: {
                    color: '#B7E1FF',
                    fontSize: 24,
                    fontFamily: 'Arial',
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#09F'
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            textStyle: {
                color: '#FFF',
                fontSize: 24
            }
        },
        grid: {
            left: 100
        },
        legend: {
            show: false,
            top: 'bottom',
            textStyle: {
                color: '#F00',
                fontSize: 24
            },
            data: ['计划完成数', '实际完成数']
        },
        series: [
            {
                name: '计划完成数',
                type: 'bar',
                itemStyle:
                    {
                        normal: {color: color[1]},
                        emphasis: {color: color[2]}
                    },
                barWidth: 40,
                data: plan_data1
            },
            {
                name: '实际完成数',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#F90',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#CCC',
                                fontSize: 24
                            }
                        },
                        lineStyle: {
                            color: '#F90',
                            width: 4
                        }
                    },
                    emphasis: {
                        color: '#FF0'
                    }
                },
                symbolSize: 24,
                data: plan_data2
            }
        ]
    };
    plan_chart.setOption(plan_option);

    //轮番显示tips
    function clock() {
        showToolTip_highlight(plan_chart);
    }

    setInterval(clock, 5000);

    //地图开始
    var map_chart = echarts.init(document.getElementById('map'));

    var CCData = [
        [{name: '长春'}, {name: '上海', value: 95}],
        [{name: '长春'}, {name: '广州', value: 90}],
        [{name: '长春'}, {name: '大连', value: 80}],
        [{name: '长春'}, {name: '南宁', value: 70}],
        [{name: '长春'}, {name: '南昌', value: 60}],
        [{name: '长春'}, {name: '拉萨', value: 50}],
        [{name: '长春'}, {name: '长春', value: 40}],
        [{name: '长春'}, {name: '包头', value: 30}],
        [{name: '长春'}, {name: '重庆', value: 20}],
        [{name: '长春'}, {name: '北京', value: 10}]
    ];

    var series = [];
    [['长春', CCData]].forEach(function (item, i) {
        series.push({
                name: '一汽汽车销售',
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#FF0',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: '#000',
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: '一汽汽车销售',
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#FF0',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: '一汽汽车销售',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return 15;
                },
                itemStyle: {
                    normal: {
                        color: '#FFF',
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#FFF',
                                fontSize: 24
                            }
                        }
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
    });

    map_option = {
        backgroundColor: '',
        title: {
            show: false,
            text: '一汽汽车销售地域分布示意图',
            subtext: '截至2018年05月04日',
            left: 'center',
            top: 10,
            textStyle: {
                color: '#09F',
                fontSize: 32
            },
            subtextStyle: {
                color: '#09F',
                fontSize: 24
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['一汽汽车销售'],
            textStyle: {
                color: '#000'
            },
            selectedMode: 'single'
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#09F',
                    borderColor: '#09F',
                    opacity: 0.5
                },
                emphasis: {
                    areaColor: '#09F',
                    borderColor: '#09F',
                    opacity: 0.8
                }
            }
        },
        series: series
    };

    map_chart.setOption(map_option, true);

    resresh();

    //开始定时刷新
    setInterval(resresh, 5 * 1000);
});

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

function showToolTip_highlight(mychart) {
    var echartObj = mychart;

    // 高亮当前图形
    var highlight = setInterval(function () {
        echartObj.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: indexnum
        });

        echartObj.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: indexnum
        });
        clearInterval(highlight);
        indexnum = indexnum + 1;
        if (indexnum >= 7) indexnum = 0;
    }, 1000);
}

//定时刷新数据
function resresh() {
    var myDate = new Date();

    // $('#refresh').html("<img src=\"images/wait.gif\" align=\"absmiddle\"><span>数据刷新中...</span>");

    //年月日刷新
    $('#currentYear').html(myDate.getFullYear() + "年");
    $('#currentMonth').html(insertZero(myDate.getMonth() + 1) + "月");
    $('#currentDay').html(insertZero(myDate.getDate()) + "日");
    $('#currentDate').html(myDate.getFullYear() + "/" + insertZero(myDate.getMonth() + 1) + "/" + insertZero(myDate.getDate()));

    option_gauge.series[0].axisLabel.show = true;
    option_gauge.series[0].axisLine.lineStyle.color = [[0.2, color[0]], [0.8, color[1]], [1, color[2]]]

    var maxg = Math.round(Math.random() * 500) + 400;
    var n1 = Math.round(Math.random() * (maxg - 100)) + 100;
    var n2 = Math.round(Math.random() * (n1 - 50)) + 50;
    var n3 = (n2 / maxg * 100).toFixed(2);

    //年进度条
    option_Progress.title.text = "计划生产";
    option_Progress.series[0].data[0].value = maxg;
    option_Progress.title.subtext = maxg + "台";
    option_Progress.series[0].data[1].value = 0;
    y_gauge1.setOption(option_Progress);

    option_Progress.title.text = "已接订单";
    option_Progress.series[0].data[0].value = n1;
    option_Progress.title.subtext = n1 + "台";
    option_Progress.series[0].data[1].value = (maxg - n1);
    y_gauge2.setOption(option_Progress);

    option_Progress.title.text = "已经完成";
    option_Progress.series[0].data[0].value = n2;
    option_Progress.title.subtext = n2 + "台";
    option_Progress.series[0].data[1].value = (maxg - n2);
    y_gauge3.setOption(option_Progress);

    option_Progress.title.text = "计划完成率";
    option_Progress.series[0].data[0].value = n3;
    option_Progress.title.subtext = n3 + "%";
    option_Progress.series[0].data[1].value = (100 - n3);
    y_gauge4.setOption(option_Progress);

    //月进度条
    maxg = Math.round(Math.random() * maxg) + 1;
    n1 = Math.round(Math.random() * maxg) + 1;
    n2 = Math.round(Math.random() * n1);
    n3 = (n2 / maxg * 100).toFixed(2);

    option_Progress.title.text = "计划生产";
    option_Progress.series[0].data[0].value = maxg;
    option_Progress.title.subtext = maxg + "台";
    option_Progress.series[0].data[1].value = 0;
    m_gauge1.setOption(option_Progress);

    option_Progress.title.text = "已接订单";
    option_Progress.series[0].data[0].value = n1;
    option_Progress.title.subtext = n1 + "台";
    option_Progress.series[0].data[1].value = (maxg - n1);
    m_gauge2.setOption(option_Progress);

    option_Progress.title.text = "已经完成";
    option_Progress.series[0].data[0].value = n2;
    option_Progress.title.subtext = n2 + "台";
    option_Progress.series[0].data[1].value = (maxg - n2);
    m_gauge3.setOption(option_Progress);

    option_Progress.title.text = "计划完成率";
    option_Progress.series[0].data[0].value = n3;
    option_Progress.title.subtext = n3 + "%";
    option_Progress.series[0].data[1].value = (100 - n3);
    m_gauge4.setOption(option_Progress);

    //日进度条
    maxg = Math.round(Math.random() * maxg) + 1;
    n1 = Math.round(Math.random() * maxg) + 1;
    n2 = Math.round(Math.random() * n1);
    n3 = (n2 / maxg * 100).toFixed(2);

    option_Progress.title.text = "计划生产";
    option_Progress.series[0].data[0].value = maxg;
    option_Progress.title.subtext = maxg + "台";
    option_Progress.series[0].data[1].value = 0;
    d_gauge1.setOption(option_Progress);

    option_Progress.title.text = "已接订单";
    option_Progress.series[0].data[0].value = n1;
    option_Progress.title.subtext = n1 + "台";
    option_Progress.series[0].data[1].value = (maxg - n1);
    d_gauge2.setOption(option_Progress);

    option_Progress.title.text = "已经完成";
    option_Progress.series[0].data[0].value = n2;
    option_Progress.title.subtext = n2 + "台";
    option_Progress.series[0].data[1].value = (maxg - n2);
    d_gauge3.setOption(option_Progress);

    option_Progress.title.text = "计划完成率";
    option_Progress.series[0].data[0].value = n3;
    option_Progress.title.subtext = n3 + "%";
    option_Progress.series[0].data[1].value = (100 - n3);
    d_gauge4.setOption(option_Progress);

    //仪表盘刷新
    option_gauge.series[0].axisLine.lineStyle.color = [[0.2, color[0]], [0.8, color[1]], [1, color[0]]];

    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "水";
    $('#vg1').html(option_gauge.series[0].data[0].value);
    gauge1.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "电";
    $('#vg2').html(option_gauge.series[0].data[0].value);
    gauge2.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "天然气";
    $('#vg3').html(option_gauge.series[0].data[0].value);
    gauge3.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "压缩空气";
    $('#vg4').html(option_gauge.series[0].data[0].value);
    gauge4.setOption(option_gauge);
    option_gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option_gauge.series[0].data[0].name = "蒸汽";
    $('#vg5').html(option_gauge.series[0].data[0].value);
    gauge5.setOption(option_gauge);

    //显示最后更新时间
    $('#refresh').html("<span id=\"refreshTime\">最后刷新时间：" + myDate.toLocaleDateString() + " " + myDate.toLocaleTimeString() + "</span>");
}

//生成订单号
function getOrderNumber(n) {
    var no = "000000" + n.toString();
    return no.substring(no.length - 6);
}

//前面补0
function insertZero(n) {
    var no = "000000" + n.toString();
    return no.substring(no.length - 2);
}